<template>
  <div class="content_middle">
    <div class="content_title">IDs</div>

      <el-input type="textarea"   v-model="textarea" 
          show-word-limit >
       </el-input>

    <div>Please enter the list of ids you wish to delete. You can provide multiple(comma separated) ids. </div>
    <el-button type="primary" size="small" class="content_btn" @click="apiDeletedia">Delete</el-button>

    <el-dialog
      title="Delete"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <span>The entered ids will be deleted from the ODS dataset, please confirm whether to continue.</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">Cancel</el-button>
        <el-button class="footer_btn" type="primary" size="small" @click="apiDeleteHandle">Delete</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import bus from './apitoolbus'
export default {
data() {
return {
  textarea:'',
  requestInfo: {
  },
  dialogVisible: false

}
},
created() {
  bus.$on('requestHandle', (data)=>{
    this.requestInfo = data
  })
},
methods: {
  apiDeletedia(){
    let textareaStr =  this.textarea.replace(/\s/g, '').trim()
    const regex = /^((MB-)?\d+(，|,))*(MB-)?\d+$/;
    if(this.textarea.trim().length===0) {
      return this.$message.error('please enter ids.')
    } else {
       let isMatch = regex.test(textareaStr);
        if (!isMatch) {
          return this.$message.error('The entered format can not be parsed, please enter multiple ids separated by commas.')
        }
    }
    if (!this.requestInfo.syncClient) {
       return this.$message.error('Query params [client] cannot be empty.')
    } else if (!this.requestInfo.deleteAction) {
       return this.$message.error('Query params [action] cannot be empty.')
    } 
    this.dialogVisible = true
  },
  apiDeleteHandle(){
    this.dialogVisible = false
    const params = {
      ids:this.textarea.replace(/\s/g, '').trim(),
      tenantCode: this.$store.state.user.tenantCode,
      userId: this.$store.state.user.id,
      client: this.requestInfo.syncClient,
      action: this.requestInfo.deleteAction,
      path:'/custom/delete'
    }
    this.$interface.other.getApiToolDeleteData(params).then(({ data: res }) => {
      if (res.code !== 0) {
        bus.$emit('deleteResult',res)
        return this.$message.error('Ids deletion failed.')
      }
      let a = this.textarea.replace(/\s/g, '').trim().split(",") || []
      let b = res.deleted || []
      let c = a.filter(item => !b.includes(item))
      if (c.length > 0) {
        res['Unable to delete existing ids in the system'] = c 
      } 
      bus.$emit('deleteResult',res)
      this.$message.success('Ids has been removed successfully')
    }).catch((err) => {
      console.log(err,"err")
    })
  }


},
destroyed() {
  bus.$off("requestHandle");
  bus.$off("deleteResult");
},
}
</script>

<style scoped lang="scss">
.content_middle {
  padding: 15px;
  .content_title {
    font-size: 1.3em;
    font-weight: bold;
    height: 2em;
    line-height: 2em;
  }
  ::v-deep .el-textarea__inner {
    min-height: 300px !important;
  }
  .content_btn {
    float: right;
    margin-top: 10px;
    background-color: #169bd5;
    border-color: #169bd5;
  }
  .footer_btn {
    background-color: #169bd5;
    border-color: #169bd5;
  }


} 

</style>

